<template>
	<view>
		<view class="container" v-if="showTable">

			<view class="uni-flex uni-row" style="padding-top: 50rpx;" @click="$backRoute">
				<view>
					<image mode="aspectFit" style="width: 50upx;height: 50upx; margin-left: 24upx;"
						src="/static/img/list/back.png" />
				</view>
				<view style="width: 100%; text-align: right;margin-right: 12upx;">
					<image mode="aspectFit" style="width: 228upx;height: 88upx;" src="/static/img/home/logo@2x.png" />
				</view>
			</view>
			<view style="margin-top: 32rpx;"></view>


			<view class="uni-flex  uni-row"
				style="-webkit-justify-content: flex-end;justify-content: flex-end; flex: 1; padding-bottom: 10upx;">
				<text class="cls1">{{i18n.msg18 || 'file export' }}</text>
				<image @click="fileExportDo" mode="aspectFit"
					style="width: 62upx;height: 62upx;margin-left: 20rpx;margin-right: 24rpx;"
					src="/static/img/list/daochu.png" />
			</view>
			<view>

				<view class="uni-flex uni-row " style="margin-top: 10rpx;">
					<view style="margin-left: 24rpx;margin-right: 12rpx; padding-top: 10rpx;">
						<text class="cls1">{{i18n.msg191 || 'First Name:' }}</text>
					</view>
					<view class="flex-1">
						<input v-model="firstName" :placeholder="i18n.msg192 || ' Export (First Name) here'" type="text"
							@input="firstNameChange"
							style="border: 2rpx;background-color: #ffffff; margin-right: 20rpx; height: 72rpx;		border-radius: 15rpx;" />
					</view>
				</view>
				<view class="uni-flex uni-row " style="margin-top: 10rpx;">
					<view style="margin-left: 24rpx;margin-right: 12rpx; padding-top: 10rpx;">
						<text class="cls1">{{i18n.msg193 || 'Last Name:' }}</text>
					</view>
					<view class="flex-1">
						<input v-model="lastName" :placeholder="i18n.msg194 || ' Export (Last Name) here'" type="text"
							style="border: 2rpx;background-color: #ffffff; margin-right: 20rpx; height: 72rpx;		border-radius: 15rpx;" />
					</view>
				</view>
				<view class="uni-flex uni-row " style="margin-top: 10rpx;">
					<view style="margin-left: 24rpx;margin-right: 12rpx; padding-top: 10rpx;width: 166upx;">
						<text class="cls1">{{i18n.msg195 || 'Sex:' }}</text>
					</view>
					<view class="uni-flex uni-row">
						<!--						<input v-model="userSex" :placeholder="i18n.msg196 || ' Export (Male / Female) here'"-->
						<!--							type="text"-->
						<!--							style="border: 2rpx;background-color: #ffffff; margin-right: 20rpx; height: 72rpx;		border-radius: 15rpx;" />-->

						<radio-group class="uni-flex uni-row" v-model="userSex" @change="radioChange">
							<label class="uni-flex uni-row"
								v-for="(item, index) in [{value: 'Male',name: 'Male'},{value: 'Female',name: 'Female'}]"
								:key="item.value">
								<view class="uni-flex uni-row">
									<radio :value="item.value" :checked="index === userSex" />
								</view>
								<view style="color: #fff">{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
				<view style="padding: 24rpx 0rpx;">
					<!-- <uni-table border stripe emptyText="暂无更多数据">

                <uni-tr>
                    <uni-th align="center" style="min-width: 200upx;">{{tableHead[0]}}</uni-th>
                    <uni-th align="center" width="200u">{{tableHead[1]}}</uni-th>
                    <uni-th align="center" width="200u">{{tableHead[2]}}</uni-th>
                    <uni-th align="center" width="200u">{{tableHead[3]}}</uni-th>
                    <uni-th align="center" width="200u">{{tableHead[4]}}</uni-th>
                    <uni-th align="center" width="200u">{{tableHead[5]}}</uni-th>
                    <uni-th align="center" width="200u">{{tableHead[6]}}</uni-th>
                    <uni-th align="center" width="200u">{{tableHead[7]}}</uni-th>
                    <uni-th align="center" width="200u">{{tableHead[8]}}</uni-th>
                </uni-tr>
                <uni-tr v-for="(item,index) in tableData" :key="index">
                    <uni-td>{{item.date}}</uni-td>
                    <uni-td>{{item.weight}}</uni-td>
                    <uni-td>{{item.num51}}</uni-td>
                    <uni-td>{{item.num101}}</uni-td>
                    <uni-td>{{item.num151}}</uni-td>
                    <uni-td>{{item.num201}}</uni-td>
                    <uni-td>{{item.numGreater201}}</uni-td>
                    <uni-td>{{item.walkTime}}</uni-td>
                    <uni-td>{{item.min}}</uni-td>
                </uni-tr>

            </uni-table> -->

					<wyb-table ref="table" :headers="headers" :contents="tableData" height="950rpx"
						:firstLineFixed="true" />
				</view>
				<HtmlExcel ref="htmlExcel" @successTip="successTip"></HtmlExcel>
			</view>

		</view>
		<view v-else>
			<view style="position: fixed;  left: 0upx;top: 0upx;  ">
				<image mode="scaleToFill" :style="{width:'750upx',height:$utils.screenHeight() }"
					src="/static/img/weightView/back.png" />
			</view>
			<view class="uni-flex uni-row" style="padding-top: 30rpx;">
				<view @click="$backRoute">
					<image mode="aspectFit" style="width: 50upx;height: 50upx; margin-left: 24upx;"
						src="/static/img/list/back.png" />
				</view>
				<view style="width: 100%; text-align: right;margin-right: 12upx;">
					<image mode="aspectFit" style="width: 228upx;height: 88upx;" src="/static/img/home/logo@2x.png" />
				</view>
			</view>

			<view style="position: fixed;  left: 116upx;top: 282upx; ">
				<view style="position: absolute;left: 100upx;top: 300upx;z-index: 111;" v-if="$utils.isDebug">
					{{dataInfoWeight[1]}}
				</view>

				<image mode="aspectFit" style="width: 254upx;height: 448upx;" :src="getWeightPath(1)  +  '1.png'" />

			</view>
			<view style="position: fixed;  left: 366upx;top: 255upx; ">
				<view style="position: absolute;left: 100upx;top: 300upx;z-index: 111;" v-if="$utils.isDebug">
					{{dataInfoWeight[2]}}
				</view>
				<image mode="aspectFit" style="width: 276upx;height: 476upx;" :src="getWeightPath(2)  +  '2.png'" />
			</view>
			<view style="position: fixed;  left: 148upx;top: 726upx; ">
				<view style="position: absolute;left: 100upx;top: 300upx;z-index: 111;" v-if="$utils.isDebug">
					{{dataInfoWeight[3]}}
				</view>
				<image mode="aspectFit" style="width: 220upx;height: 476upx;" :src="getWeightPath(3)  +  '4.png'" />
			</view>
			<view style="position: fixed;  left: 366upx;top: 726upx; ">
				<view style="position: absolute;left: 100upx;top: 300upx;z-index: 111;" v-if="$utils.isDebug">
					{{dataInfoWeight[4]}}
				</view>
				<image mode="aspectFit" style="width: 145upx;height: 476upx;" :src="getWeightPath(4)  +  '3.png'" />
			</view>


			<view style="position: fixed;  left: 50upx;bottom: 66upx; ">
				<view>
					<view style="display: inline-flex; margin-right: 10upx;" class="dian1"></view>
					<text class="text1" v-text="'(0-2,5 kg),  <51%'"></text>

					<view
						style="display: inline-flex; margin-right: 10upx; margin-left: 80upx; background-color: #7B42A8;"
						class="dian1"></view>
					<text class="text1" v-text="'(5,1- 7,5 kg), <151%'"></text>
				</view>
				<view>
					<view style="display: inline-flex; margin-right: 10upx; background: #01AF50;" class="dian1"></view>
					<text class="text1" v-text="'(2,6- 5 kg), <101%'"></text>
					<view style="display: inline-flex; margin-right: 10upx; margin-left: 60upx; background: #FF0000;"
						class="dian1"></view>
					<text class="text1" v-text="'(7.6--up), >151%'"></text>
				</view>


			</view>
		</view>

		<view style="position: fixed;  left: 46upx;top: 126upx; ">
			<view style="flex: 1;" @click="showTable=!showTable">
				<image mode="aspectFit" style="width: 62upx;height: 62upx;" src="/static/img/list/xqt.png" />

			</view>
		</view>

	</view>
</template>

<script>
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import HtmlExcel from './HtmlExcel.vue'
	import {
		post,
		downloadFile
	} from "@/api/request.js"

	export default {
		components: {
			wybTable,
			HtmlExcel
		},
		data() {
			return {
				firstName: '',
				lastName: '',
				userSex: '',
				showTable: true,
				tableData: [],
				dataInfoWeight: [],
				dataInfo: {
					saveTime: 0
				},
				headers: [{
					label: this.$t('message').msg1113,
					key: 'date',
					width: '250'
				}, {
					label: 'W',
					key: 'weight',
					width: '100'
				}, {
					label: '(0~2.5Kg) <51%',
					key: 'num51',
					width: '160'
				}, {
					label: '(2.6~5Kg) <101%',
					key: 'num101',
					width: '160'
				}, {
					label: '(5.1~7.5Kg)<151%',
					key: 'num151',
					width: '200'
				}, {
					label: '(7.5Kg~10Kg)<201%',
					key: 'num201',
					width: '210'
				}, {
					label: '(>10.1Kg) >201%',
					key: 'numGreater201',
					width: '160'
				}, {
					label: this.$t('message').msg1111,
					key: 'walkTime',
					width: '160'
				}, {
					label: this.$t('message').msg1112,
					key: 'min',
					width: '160'
				}],
				timeInt: null
			}
		},

		onLoad() {

		},
		onHide() {
			if (this.timeInt) {
				clearInterval(this.timeInt)
				this.timeInt = null;
			}
		},
		onShow() {
			this.showDo();
			this.timeInt = setInterval(this.showDo, 666);

		},
		computed: {
			i18n() {
				return this.$t('message');
			},
			getWeightPath() {
				return (index) => {
					let val = this.dataInfoWeight[index]
					//方便演示
					// val = Math.random() * 100;
					return "/static/img/weightView/" + this.valToLevel(val) + "/";
				}

			}


		},
		methods: {
			radioChange: function(evt, e) {
				this.userSex = evt.target.value;
			},
			firstNameChange(val) {
				uni.setStorageSync("list.firstName", this.firstName)
			},
			valToLevel(val) {
				if (val < 25) {
					return "huang"
				}
				if (val < 50) {
					return "lan"
				}
				if (val < 75) {
					return "zi"
				}
				return "hong"
			},
			showDoEx() {
				let dataInfo = this.$utils.getDataInfo$Weight()
			},
			showDo() {
				this.firstName = uni.getStorageSync("list.firstName")

				let dataInfo = this.$utils.getDataInfo$Weight()
				if (this.firstName == 'lsz') {
					dataInfo = {
						$DATA6: [1, 1, 1, 1, 1, 1, 1, 11, 9, 2020, 11],
						$DATA5: [1, 1, 1, 1, 1, 1, 1, 11, 9, 2020, 11],
						$DATA4: [1, 1, 1, 1, 1, 1, 1, 11, 9, 2020, 11],
						$DATA3: [1, 1, 1, 1, 1, 1, 1, 11, 9, 2020, 11],
						$DATA2: [1, 1, 1, 1, 1, 1, 1, 11, 9, 2020, 11],
						$DATA1: [1, 1, 1, 1, 1, 1, 1, 11, 9, 2020, 11],
						$DATA0: [1, 1, 1, 1, 1, 1, 1, 11, 9, 2020, 11],
						$TOTAL: [1, 1, 1, 1, 1, 1, 1, 11, 9, 2020, 11]
					}
				}
				if (!dataInfo) {
					return;
				}
				// this.showDoEx()
				if (dataInfo.$WEIGHT && dataInfo.$WEIGHT.length > 1) {
					this.dataInfoWeight = dataInfo.$WEIGHT;

				}
				if (this.dataInfo && this.dataInfo.saveTime === dataInfo.saveTime) {
					return;
				}

				if (dataInfo) {
					let arr = [];
					let obj = this.arrToObj(dataInfo.$TOTAL, arr);

					// obj.date = this.i18n.msg21

					this.arrToObj(dataInfo.$DATA6, arr);
					this.arrToObj(dataInfo.$DATA5, arr);
					this.arrToObj(dataInfo.$DATA4, arr);
					this.arrToObj(dataInfo.$DATA3, arr);
					this.arrToObj(dataInfo.$DATA2, arr);
					this.arrToObj(dataInfo.$DATA1, arr);
					this.arrToObj(dataInfo.$DATA0, arr);
					obj.date = `Total ${arr.length - 1} Days` 
					this.tableData = arr;
				}
			},
			fileExportDo() {

				//            let name = this.firstName + " " + (this.lastName ? this.lastName : '') + " " + this.userSex
				//            this.$refs.htmlExcel.tableToExcel(this.headers, this.tableData,
				//                name)
				if (!this.firstName) {
					uni.showToast({
						title: 'Error，Please input First Name',
						icon: 'none'
					});
					return;
				}
				let data = {
					"name1": this.firstName ? this.firstName : '',
					"name2": this.lastName ? this.lastName : '',
					"sex": this.userSex ? this.userSex : "",
					"list": this.tableData
				}
				let fileName = this.firstName + new Date().getTime();
				downloadFile("/app/manage/excel/test/" + fileName + ".xlsx?q=" + encodeURI(JSON.stringify(data)), (
					res) => {
					uni.saveFile({
						tempFilePath: res.tempFilePath,
						success: function(saveRes) {
							let savedFilePath = saveRes.savedFilePath;
							console.log("保存的文件路径:", saveRes)


							plus.io.requestFileSystem(plus.io.PRIVATE_DOC, (fs) => {

								let fullPath = fs.root.fullPath;
								let pathStr = fullPath.replace("/storage/emulated/0", "");
								console.log(pathStr)
								uni.showToast({
									title: pathStr + saveRes.savedFilePath.replace(
										"_doc/", ""),
									icon: 'none',
									duration: 5000
								})
							})
						}
					});


				})
				return
				// 	post("/app/manage/excel/exprot", data).then(res => {
				// 					let data = res[1]
				// 		if (data && data.statusCode == 200) {

				// 			let val = data.data
				// 			this.$refs.htmlExcel.exportFile(val, "smartboot", this.firstName)
				// 		} else {
				// 			console.log("后台请求失败", data)
				// 			uni.showToast({
				// 				title: 'error...',
				// 				icon:'none'
				// 			});
				// 		}
				// 	})
			},
			successTip(path) {
				uni.showToast({
					title: path,
					icon: 'none',
					duration: 5000
				})
			},
			arrToObj(arr, pushArr) {
				if (arr && arr.length) {
					let obj = {
						date: '',
						weight: '',
						num51: arr[0],
						num101: arr[1],
						num151: arr[2],
						num201: arr[3],
						numGreater201: arr[4],
						walkTime: arr[5],
						min: arr[6],
					}
					if (arr.length >= 11) {
						if (arr[9] && (arr[9]+'' ).length > 2) {
							arr[9] = (arr[9]+'' ).substring(2)
						}
						if (arr[8] && (arr[8]+'' ).length < 2) {
							arr[8] = "0" + arr[8]
						}
						if (arr[7] && (arr[7]+'' ).length < 2) {
							arr[7] = "0" + arr[7]
						}
						obj.date = `${arr[7]}.${arr[8]}.${arr[9]}`
						obj.weight = arr[10] + "Kg"
					}
					if (pushArr) {
						pushArr.push(obj)
					}
					return obj
				}
			}

		}
	};
</script>

<style scoped>
	.cls1 {
		font-size: 32 rpx;
		font-weight: 400;
		line-height: 50 rpx;
		color: #FFFFFF;
		opacity: 1;
	}

	.cls9 {
		height: 100%;
		background: url('~@/static/img/list/bjt.png');
		/*这个是按从左往右，从上往下的百分比位置进行调整*/
		background-size: 100% 100%;
		/*按比例缩放*/
		/*background-size: 100px 100px;!*这个是按数值缩放*!*/
		background-repeat: no-repeat;
		/*还有repeat-x,y等*/
	}

	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		min-height: 100%;
		background: url('~@/static/img/list/bjt.png');
		/*这个是按从左往右，从上往下的百分比位置进行调整*/
		background-size: 100% 100%;
		/*按比例缩放*/
		/*background-size: 100px 100px;!*这个是按数值缩放*!*/
		background-repeat: no-repeat;

	}

	.dian1 {
		width: 14 upx;
		height: 14 upx;
		background: #FEC002;
		border-radius: 50%;
		opacity: 1;

	}

	.text1 {

		font-size: 26 upx;
		font-weight: 400;
		line-height: 30 upx;
		color: #FFFFFF;
		opacity: 1;

	}
</style>
